<template>
  <div class="hello">
    <!--    布局容器-->
    <el-container>
      <!--      顶栏容器-->
      <el-header>
        <div class="header">
          <el-row>
            <el-col :span="20">
              <div class="grid-content-left bg-purple-dark">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="">
                  <el-menu-item index="1" @click="handleClick('/')">
                    首页
                  </el-menu-item>
                  <el-menu-item index="2" @click="handleClick('/work/home')">
                    工作台
                  </el-menu-item>
<!--                  <el-menu-item index="3">标签3</el-menu-item>-->
                </el-menu>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content-right bg-purple-dark">
<!--                <div class="login"><span class="text1">标签2</span></div>-->
<!--                <div class="login" style="margin-right: 15px"><span class="text1">标签1</span></div>-->

                <div class="register">
                  <Avatar></Avatar>
                </div>

              </div>
            </el-col>
          </el-row>


        </div>
      </el-header>
      <!--      主区域容器-->
      <el-main>
        <div class="main">

          <div>
            <h2 class="section-title text-center">万试通考试端</h2>
            <p class="lead text-center">产品详情</p>
          </div>

          <template>
            <el-carousel height="600px" indicator-position="outside" :autoplay="true" type="card" arrow="never"
                         :loop="true">
              <el-carousel-item v-for="item in carouselItems" :key="item" :style="{
                  'background-image': `url(${require(`../assets/${item}`)})`,
                  'background-size': 'cover',
                  'background-position': 'center',
                  'width':'1100px'
               }">

              </el-carousel-item>
            </el-carousel>
          </template>


          <hr>
          <h2 class="section-title mb-40 text-center">产品特点和优势</h2>

          <div class="row text-center">
            <div class="col-sm-3"><span class="icon icon-m icon-color color-green mb-20"><i
                class="el-icon-sell"></i></span>
              <h5>高性价比</h5>
              <p>万试通售价方面采用了阶梯方式，在功能方面也相对比较完整，移动端支持多个平台. 整体是一套非常性价比的考试服务</p>
            </div>
            <!--/column -->
            <div class="col-sm-3"><span class="icon icon-m icon-color color-blue mb-20"><i
                class="el-icon-cpu"></i></span>
              <h5>技术栈</h5>
              <p>万试通使用互联网流行技术，前端使用 Vue2 和Vue-Element 组件，后端使用 Spring 框架和 MybatisPlus 数据访问框架，保证系统的高性能</p>
            </div>
            <!--/column -->
            <div class="col-sm-3"><span class="icon icon-m icon-color color-orange mb-20"><i
                class="el-icon-setting"></i></span>
              <h5>功能丰富</h5>
              <p>万试通考试系统包含：简洁便利的学生考试端、自动批卷以及自动导出成绩文件的教师管理端、单机部署，更多功能敬请期待</p>
            </div>
            <!--/column -->
            <div class="col-sm-3"><span class="icon icon-m icon-color color-info mb-20"><i
                class="el-icon-chat-dot-round"></i></span>
              <h5>售后服务</h5>
              <p>万试通提供相应的技术咨询测试部署服务、万试通设计文档、万试通用户手册、开发和部署文档、视频等</p>
            </div>
            <!--/column -->
          </div>

          <!--分隔线-->
          <hr>
          <h2 class="section-title mb-40 text-center">数据统计</h2>

          <div class="row text-center">


            <div class="col-sm-3">
              <el-statistic style="width: 300px" group-separator="," :value="teaCount">
                <template #title>
                  <div class="custom-title">{{ titleTea }}</div>
                </template>
                <template slot="suffix">
                  <i class="el-icon-user-solid" style="color: #409EFF"></i>
                </template>
              </el-statistic>
            </div>


            <div class="col-sm-3">
              <el-statistic style="width: 300px" group-separator="," :value="stuCount">
                <template #title>
                  <div class="custom-title">{{ titleStu }}</div>
                </template>
                <template slot="suffix">
                  <i class="el-icon-user-solid" style="color: #409EFF"></i>
                </template>
              </el-statistic>
            </div>


            <div class="col-sm-3">
              <el-statistic style="width: 300px" group-separator="," :value="bankQuestionCount">
                <template #title>
                  <div class="custom-title">海量题库</div>
                </template>
                <template slot="suffix">
                  <i class="el-icon-s-flag" style="color: #409EFF"></i>
                </template>
              </el-statistic>
            </div>


            <div class="col-sm-3">
              <el-statistic style="width: 300px" group-separator="," :value="schoolCount">
                <template #title>
                  <div class="custom-title">合作院校</div>
                </template>
                <template slot="suffix">
                  <i class="el-icon-school" style="color: #409EFF"></i>
                </template>
              </el-statistic>
            </div>


          </div>

        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
// import Index from '@/components/Index'

import Avatar from "@/components/Avatar";
import {Storage} from "@/utils/localStorage";
import {getSchoolCountApi, getStuCountApi, getTeaCountApi} from "@/api/user";
import {getBankQuestionApi, getBankQuestionCountApi} from "@/api/BankQuestion";

const storage = new Storage();

export default {
  name: 'IndexView',
  components: {
    Avatar
  },
  data() {
    return {
      //
      value2: 44430,
      titleTea: "入驻教师",
      titleStu: "注册学生",
      //
      activeIndex: '1',
      avatarSize: "large",
      avatarFlag: true,
      userData: [],
      //轮播图路径
      carouselItems: [
        'login4.jpg',
        'swiper_exam_1.jpg',
        'swiper_exam_3.jpg'
      ],
      stuCount: '',
      teaCount: '',
      bankQuestionCount: '',
      schoolCount:''
    };
  },
  methods: {
    handleClick(url) {
      this.$router.push({path: url, replace: true});
    },
    getSchoolCount() {
      getSchoolCountApi().then(res => {
        if (res.data.code == 200) {
          this.schoolCount= res.data.data;
        }
      })
    },
    getBankQuestionCount() {
      getBankQuestionCountApi().then(res => {
        if (res.data.code == 200) {
          this.bankQuestionCount = res.data.data;
        }
      })
    },
    getTeaCount() {
      getTeaCountApi().then(res => {
        if (res.data.code == 200) {
          this.teaCount = res.data.data;
          console.info(this.teaCount)

        }
      })

    },
    getStuCount() {
      getStuCountApi().then(res => {
        if (res.data.code == 200) {
          this.stuCount = res.data.data;
          console.info(this.stuCount)
        }
      })
    }
  },
  created() {

    this.getTeaCount()
    this.getStuCount()
    this.getBankQuestionCount()
    this.getSchoolCount()
  }

}
</script>

<style scoped>

.el-icon-user-solid,.el-icon-s-flag,.el-icon-school{
  font-size: 24px!important;
}

.custom-title {
  font-size: 17px;
  padding-bottom: 10px;
}

.color-info {
  color: #909399;
}

.color-green {
  color: #67C23A;
}

.color-blue {
  color: #409EFF;
}

.mb-40 {
  margin-bottom: 50px !important;
}

.icon {
  display: inline-block;
}

.icon-m {
  font-size: 48px;
}

.row {
  margin-left: 190px;
  margin-right: 190px;
  display: flex;
  align-items: center;
}

.col-sm-3 {
  width: 25%;
}

.col-sm-3 {
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}

hr {
  border: 0;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 70px;
  margin-bottom: 70px;
}

.lead {
  font-size: 18px;
  line-height: 34px;
  font-weight: 300;
  color: #707070;
}

.text-center {
  text-align: center;
}

.section-title {
  font-weight: 300;
  font-size: 34px;
  line-height: 44px;
  margin-bottom: 15px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}


.router-link {
  text-decoration: none;
}

.text1:hover {
  color: #0052d9;
}

.textReg {
  color: #fff;
}

.login {
  display: flex;
  width: 70px;
  height: 60px;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  /*border-radius: 4px;*/
  cursor: pointer
}

/*.register:hover{*/
/*  background-color: #6595e5;*/
/*}*/

/*登录注册块*/
.register {
  display: flex;
  /*background-color: #0052d9;*/
  width: 70px;
  height: 60px;

  justify-content: center;
  align-items: center;

  /*border-radius: 4px;*/
  cursor: pointer
}


/*总合盒子高度*/
.hello {
  height: 98vh;
}

/*盒子下的header高度*/
.hello .header {
  height: 140px;
}

.hello .main {
  text-align: center;
  height: 1529px;
}

/*layout分栏默认颜色*/
/* .bg-purple-dark {
  background: #99a9bf;
} */

/*layout左导航分栏*/
.grid-content-left {
  /*border-radius: 4px;*/
  min-height: 60px;

}

/*layout右登录注册分栏*/
.grid-content-right {
  /*border-radius: 4px;*/
  min-height: 60px;
  display: flex;
  justify-content: end;
  border-bottom: 1px solid #e6e6e6;
}

</style>